<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>社团管理系统</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式 */
        .navbar {
            background-color: #333;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }
        .navbar a {
            color: white;
        }
        .navbar a:hover {
            color: #007bff;
        }
        .logout-link {
            cursor: pointer;
            color: white;
        }
        .content-wrapper {
            margin-top: 60px;
            padding: 0px;
        }
        iframe#page-content {
            width: 100%;
            height: calc(100vh - 60px);
            border: none;
        }
        .user-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
            vertical-align: middle;
        }
    </style>
</head>
<body>

<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" >
    <a class="navbar-brand" href="#" style="margin-left: 50px">社团管理系统</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="http://localhost:8080/boot/activity.html">活动</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://localhost:8080/boot/index.html">社团</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://localhost:8080/boot/personalcenter.html">个人中心</a>
            </li>
        </ul>
        <ul class="navbar-nav" style="margin-left: auto;">
            <li class="nav-item d-flex align-items-center">
                <!-- 用户头像 -->
                <a href="http://localhost:8080/boot/personMessage.html">
                    <img class="user-avatar" id="user-avatar" src="" alt="User Avatar" style="display: none;">
                </a>
                <!-- 消息链接 -->
                <a class="nav-link" href="http://localhost:8080/boot/myInf.html" id="message-link" style="display: none;">消息</a>

                <!-- 登录链接或注销按钮 -->
                <a class="nav-link" href="http://localhost:8080/boot/login.html" id="login-link">登录</a>
                <span class="nav-link logout-link ml-2" id="logout" style="display: none;">注销</span>
            </li>
        </ul>
    </div>
</nav>

<!-- 内容区域 -->
<div class="content-wrapper">
    <iframe id="page-content" src="index.html" title="Page Content"></iframe>
</div>

<script src="js/jquery-3.7.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script> <!-- 确保使用 bootstrap.bundle.min.js 包含 Popper.js -->
<script src="js/vue.min.js"></script>
<script src="js/util.js"></script>

<script>
    document.getElementById('logout').addEventListener('click', function(event) {
        event.preventDefault();
        console.log("注销功能被调用");
        fetch('logout', { method: 'POST' })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 更新登录状态为未登录
                    document.getElementById('user-avatar').src = '';
                    document.getElementById('login-link').style.display = 'inline-block';
                    document.getElementById('logout').style.display = 'none';
                    document.getElementById('message-link').style.display = 'none'; // 隐藏消息链接
                    document.getElementById('page-content').src = "login.html"; // 跳转到登录页面
                }
            });
    });

    // 更新 iframe 源地址以响应导航链接点击
    document.querySelectorAll('.navbar-nav a').forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止默认行为
            const targetUrl = this.getAttribute('href');
            document.getElementById('page-content').src = targetUrl;
        });
    });

    $(function(){
        // 登录验证函数
        function LoginVerify() {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: "loginVerify",
                    type: "get",
                    dataType: "json",
                    success: function(response) {
                        if (response.state == 300) {
                            // 未登录
                            reject(new Error('Not logged in'));
                        } else {
                            // 已登录，解析 Promise 并传递头像 URL
                            resolve(response.data.loginUser.head);
                        }
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        // 检查登录状态并更新导航栏
        async function checkLoginStatus() {
            try {
                const headImageUrl = await LoginVerify();
                console.log("获取到的头像 URL:", headImageUrl);

                const userAvatar = document.getElementById('user-avatar');
                userAvatar.src = 'img/head/' + headImageUrl;
                userAvatar.style.display = 'inline-block'; // 显示头像

                // 隐藏登录链接，显示注销链接和消息链接
                document.getElementById('login-link').style.display = 'none';
                document.getElementById('logout').style.display = 'inline-block';
                document.getElementById('message-link').style.display = 'inline-block'; // 显示消息链接
            } catch (error) {
                console.error('登录验证失败:', error);
                // 如果未登录，隐藏注销链接和消息链接，显示登录链接
                document.getElementById('user-avatar').style.display = 'none'; // 隐藏头像
                document.getElementById('login-link').style.display = 'inline-block';
                document.getElementById('logout').style.display = 'none';
                document.getElementById('message-link').style.display = 'none'; // 隐藏消息链接
            }
        }

        // 初始化时检查登录状态，并设置定时器每3秒检查一次
        window.onload = function() {
            checkLoginStatus();
            setInterval(checkLoginStatus, 300000); // 每3秒执行一次
        };
    });
</script>

</body>
</html>



